$(function () {
  initOne(lineData);
  initTwo();
  initThree();
});

var lineData=[3839,4000,6000,5100,0,1000,2000];
function initOne(data) {
  var myChart = echarts.init(document.getElementById('chartOne'));
  var option = {

    tooltip: {
      trigger: 'axis',
      formatter:function (params ) {
        return "<span style='color: #737983;margin-right: 8px;'>7日外运土方量</span>"+params[0].value;
      },
      textStyle:{
        color:"#000000"
      },
      borderColor:"#FBA802",
      borderWidth: 2 ,
      extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,//坐标轴两边留白
      data: ['7日', '8日', '9日', '10日', '11日', '12日', '13日'],
      axisLabel: { //坐标轴刻度标签的相关设置。
        textStyle: {
          color: '#737983',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 14,
        },
        //rotate:50,
      },
      axisTick: {//坐标轴刻度相关设置。
        show: false,
      },
      axisLine: {//坐标轴轴线相关设置
        show: true,
        lineStyle: {
          color: '#E8E8E8',
        }
      },
      splitLine: { //坐标轴在 grid 区域中的分隔线。
        show: false,
      }
    },
    yAxis: [
      {
        type: 'value',
        splitNumber: 3,
        boundaryGap :[0,"20%"],
        axisLabel: {
          textStyle: {
            color: '#737983',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 14,
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#E8E8E8',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E8E8E8',
          }
        },

      }
    ],
    series: [
      {
        type: 'line',
        symbol:'circle',
        symbolSize: 12 ,
        showSymbol:false,
        itemStyle: {
          normal: {
            color: 'rgba(251, 168, 2, 1)',
            lineStyle: {
              color: "rgba(251, 168, 2, 1)",
              width: 3
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(251, 168, 2, 0.36)'
              }, {
                offset: 1,
                color: 'rgba(251, 168, 2, 0)'
              }]),
            }
          }
        },
        data: data
      }
    ]
  };
  myChart.setOption(option, true);
  $(window).resize(function () {
    myChart.resize();
  });
}

function initTwo() {
  var myChart = echarts.init(document.getElementById('chartTwo'));
  var option = {
    grid: {
      left: 20,
      right: 20,
      bottom: 30,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['7日', '8日', '9日', '10日', '11日', '12日', '13日'],
      axisLine: {
        lineStyle: {
          color: '#EEE8E8',//y轴颜色
        }
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: '#737983',
          fontSize: 14
        },

      },
      axisTick: {show: false},
    },
    yAxis: {
      type: 'value',
      boundaryGap :[0,"20%"],
      axisTick: {show: false},
      axisLine: {
        show: false,
        lineStyle: {
          color: '#EEE8E8',//y轴颜色
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#737983',
          fontSize: 14
        },

      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#EEE8E8',
          type: 'dashed'
        }
      },
    },
    series: [

      {
        name: '外运工地数',
        type: 'bar',
        barWidth: 25,
        itemStyle: {
          normal: {
            color: '#3AC27D'
          }
        },
        data: [20, 18, 20, 17, 0, 1, 4]
      }
    ]
  };
  myChart.setOption(option, true);
  $(window).resize(function () {
    myChart.resize();
  });
}

function initThree() {
  var myChart = echarts.init(document.getElementById('chartThree'));
  var option = {
    color: ['#FAC858', '#EE6666', '#73C0DE', '#FF8352', '#00FFFF', '#4AEAB0'],
    title:{
      text:"113",
      left:"center",
      top:"37%",
      textStyle:{
        fontSize:20
      }
    },
    tooltip: {
      trigger: 'item',
    },
    legend:{
      data:["设备离线","车辆超速","路线偏离"],
      bottom:30,
      icon:"roundRect",
      itemWidth:16,
      itemHeight:16,
      textStyle:{
       fontSize:14,
        color:"#8F8F8F",
      }
    },
    series: [{
      type: 'pie',
      radius: ['38%', '60%'],
      center: ['50%', '40%'],
      data: [{
        name: "设备离线",
        value: "3720"
      },
        {
          name: "车辆超速",
          value: "2920"
        },
        {
          name: "路线偏离",
          value: "2200"
        }
      ],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          borderColor:"white",
          borderRadius:5,
          borderWidth: 2
        }
      },
      labelLine: {
       show:false
      },
      label: {
        show:false
      },
    }]
  };
  myChart.setOption(option, true);
  $(window).resize(function () {
    myChart.resize();
  });
}


